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؟User‎ Control Jl ما هي‎ 


هي عبارة عن 0٣8۸‏ ممصت له تمثيل مرئي مٿل ( »)Button, Lable, Picture80×, ...٥C‏ یمکن إنشاءہ 


واعادة استخدامه كأي أداة أخرى من أدوات ال 0ألنا؟ اعاءا۷ الموجودة ضمن ال »٠٠0١١80×‏ ومن أنواعه: 


Extended Controls e‏ وفیھا لدینا ۸۲ oneمmPصomدc‏ جاھز قمنا بتطویرہ عن طریق الوراثة مثلاًء وکمتال 
على هذا كأن نقوم بإضافة مزايا وخصائص جديدة إلى ال ×۴80ںاءأ۴ كخاصية ضبط طول وعرض 


الصورة بحيث تكون نسبة طوله إلى عرضه صحيحة ومتوضع ضمن ال ×80 ں)۴ic.‏ 


PictureBox NewPictureBOX 


مثال آخر وهو ما قمت به فعلاًء component‏ یمتل Picture80X‏ شبکیة؟ وفیھا تقسم إلى عدة أسطر 
وإلى عدة أعمدة عن طريق رسم خطوط فقطء وهناك أحداث تقوم بتحليل ضغطات زر الفأرة للمستخدم إلى 
55" | لمعرفة سطر وعمود المربع الذي ضغط عليه فیتم تلوینه بلون ما یمکن تغییره» حیث یمکنه بالزر 
الأيمن المسح وبالأيسر الكتابة. 


H Location B18, 179 
EH Margin 3333 
as aa . 
FH MaximurmSize 0,0 
AH MinimumSize 0,0 
ESBS Sen & Padding 0,0, 0,0 
lH Size 150, 150 
AllIlIllIIIlÊ 3 
llIllI|IlIlIll = 0 
أ‎ BoardColumns 0 
: BoardRows 6 
للل لل يللي‎ 7 FalseBitColor [|__| White 
TrueBitColor LI Darkûaray 
BitPicture 
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Bit Image 


sاContro Composite‏ وفیھا یتم جمع أو ضم 0٣۸‏ مnدc‏ أو آکٹر لتصمیم ٥0۳P0۸8۸٤‏ جدیدء 
وکمٹال علی ذلك أن نقوم بتصمیم c٥ ۳P0۸8۸‏ یمثل مستعرض صور (بصراحة ٤0۸8۸مc0۳P‏ ضخم 
إلى حد ما ©))» وفيه سيتم وضع ×80ع۲ںاءأ۴ وبضعة 5١٥0)الا8‏ حسب الحاجة للانتقال إلى الصورة 

التالية والسابقة و...إلخ ويمكن إضافة ١٥ا8‏ للاستعراض و ١٥ا8‏ أخرى لقلب أو تكبير أو حفظ 

الصورة ©» ومن الممكن أن نقوم بإضافة خاصية تدعى هلااSهاناA‏ عندها يقوم تلقائياً بعرض الصورة 

تلو الصورة وكأنها تتحرك ضمن ال ×0 ۴i re8‏ ©. 


مثال آخر : أن نقوم بتصميم ١6١٥0م١۳٥‏ يمثل ا110 ولكن بعد إضافة بعض الخصائص والتوابع 
وليكن اسمه الجديد ١1ا5۲‏ © (لا تدققوا)» وفيه خاصية جديدة أو حدث إن جاز التعبير هو حدث 
iاeCاubط‏ الذي سنقوم فيه بالتالي: إخفاء ال اطا وإنشاء ×۲6×180عوضاً عنه برمجياً ©» ما 
الفائدة؟ الفائدة أن نقوم بإعادة تسمية ال هاطها وعند ضغط E١6١‏ يختفي ال ×۲۴×80 ويظهر ال 
ما من جديد بالاسم الجديد ©. 


lÎ Entirely a new control‏ هنا نقوم بإنشاء ser0‏ جدید تماماً قد يحتوي على 
اenمonمصده‏ جاهز وقد لا یحتوي» متال: إنشاء ٥٥۳٣P 0٥۸8۸‏ یمتل شجرة (بالخورازمیات 2 كما نعلم)› 
وهو فعلا ما قمت به ضمن وظيفة الخوارزميات 2» وفيه قد تم رسم دائرة أستطيع التحكم بألوانها وضمنها 
يوجد 1018ا أستفيد منه بوضع قيمة ضمن الدائرةء وبالطبع يوجد العديد من الأحداث المهمة كحدث تغير 
حجم ال ا0٣٤‏ ”هول الذي يقوم بإعادة رسم الدائرةء أو حدث إضاءة عقدة الذي يقوم بتغيير لون عقدة 
من خلال إعادة رسمها لمدة معينة ثم يقوم بتغيير اللون من جديد ويعيد رسمها ...إلخ. 
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® کک 
A‏ کک A‏ ˆ 


هذا الشكل بكاملة (طبعا عدا ال ٥٣٣‏ ۴) اserControل‏ تدعىی ۲۲۴۵ تتألف من اٹنتین UserControls J| jn‏ 
الأولى تمثل الخط وتدعى ١٠ا‏ والثانية تمثل العقدة وتدعى هل000 أما ال ٠۲6۴‏ هي الشجرة التي تقوم 


ما اأئدة | Controls‏ User؟‏ 


> إمكانية تطوير كأ١ ٥0۳0١8‏ موجودة لنحقق بعض الأهداف والمكاسب الشخصية ©. 

> إمكانية إنشاء كأ/8٣0مصتء‏ جديدة لها معاني جديدة قد تكون لها علاقة بالخورزميات مثلاً (شجرة كما 
رأينا قبل قليل)» وذلك بالإعتماد على 5أ/8٣0م‏ ٣٥ء‏ أخرى أو بدونها. 

> إمكانية إعادة استخدام وتجديد ما تم إنشاءه أو تطويره. 

> فوائد ليست في ذهني الآنء وأخرى لا علم لنا بها ©. 


؟User‎ Control ءڼءlضi|‎ jaa كيف‎ 
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1) نقوم بإضافة مشروع جديد إما ضمن مشروعنا الحالي ويكون بضغط الزر الأيمن فوق ٩٥ا‏ uاە5‏ المشروع 
فنختار ۸۵٩‏ ومن ثم gİ «New Project‏ عن طريق قائمة File‏ تم Project ۂjã New‏ . 


# BIA li n a GO|» > E 2-H Lg 
IEEE OE EEE 
> x Solution e 


[ple Edit View Project Build Debug Tools Test Window Help 


Project... Ctrl+ShifteN 
Web Site... Shift+ Alt+N 
File... Ctrl+N 
Project From Existing Code... 


3 Build Solution 


Rebuild Solution 


Clean Solution 


Batch Build... 


Close 


Close Solution 
Configuration Manager... 
Save MyOCR.sIn Ctrl+S 
Save MyOLR.sln As... 


Sawe All Ctrl+Shift+S 


Project Dependencies... 
Project Build Order... 


Bit Image 
Add ۴ 


New Project... 
Existing Project... 
New Web Site... 
Existing Web Site... 


Export Template... 
Set Startllp Projects... 
Page Setup... 

4 | Paste 
5 Print... Ctrl+P 
Rename گگگ‎ 
Recent Files 


New Item... Open Folder in Windows Explorer 


3 Recent Projects 
Properties 


Existing Item... 
New Solution Folder 


E ELE 


-Shape Name- 


2) عندها نقوم باختيار نوع المشرaع‏ " aryثLiDr “Nindows Forms Control‏ ونقوم باختيار أي اسم 
للمشروع. 
آ ا Add New Proj‏ 


EES Templates: ا‎ .NET Framework 3.5 5 E 
Visual C# Visual Studio installed templates 
Windows H a E 
3 ا‎ 
Web e e GF 
Smart Device Windows Class Library WPF WPF Browser Console Empty 
Office Forms Ap... Application Application Application Project 


Database کک‎ 

Reporting ا‎ qc (c 2e 
Test Windows WPF Custom WPF User Windows 
WCF Service Control Lib... Control... Forms 
Workflow Control 
XNA Game Studio 3.0 My Templates Libra 


XNA Game Studio 3.1 
Other Languages 
Other Project Types Search 
Test Projects Online Te... 


A project for creating controls to use in Windows Forms applications (.NET Framework 3.5] 
Name: WindowsFormsControlLibrary1 


Location: EM Programming\ CRA Windows Applications ARNMyOCR. + 
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3 نلاحظ ظهور المشروع ضمن ١0r6ام×E Solution‏ بعد أن سميته باسم UserConirol J| g "1 e51"‏ ب 
«Node‏ حيث يمكکن تحرير أو تير م Solution Explorer jaض jlك i İi UserControl J‏ 


وذلك بالضغط عليه مرتين ومن تم تغيير الاسم. 


فا ت دت | ا س س 7 س 7 س 


|xoqla01 


û. i Test 
H.- EA] Properties 
m-- [î] References 


A ELLE EEE 


ونلاحظ أيضاً نافذة التصميم الخاصة بال ۲٣0٣ †٣ها N08‏ هءلاء وفيها عبارة عن ۴۵٣61‏ صغيره يمكن التحكم 
بأبعادها أو قصها ...إلخ. 


4) سنقوم بتصميم عقيدة بسيطة ©» سنقوم بداية برسم دائرة» ومن الجدير بالذكر أن الرسم يمكن أن يكون 
على Panel‏ أو Button‏ أو PictureBox‏ ...إلخ» ومن الجدیر بالذکر أيضاً © أن الرسم على ال 
on‰6مmصمه‏ السابقة ليس بثابت أقصد أنه عند وجود 80 آخر في البرنامج» عند الانتقال إليه والعودة 
نجد أن الرسم اختفى والحال نفسها في حال قمنا بتصغير البرنامج أو بفتح برنامج آخر فوقه أو إذا علق 
الاجر 


من أجل المشكلة السابقة نقوم باستخدام ما يسمى بال © م2 ا8ء من هذا أيضاً؟ صف أو 5كهاء يمكننا 
من التعامل مع الصور (تخزين» تعديل» حفظ ...) والأهم أنه يمكننا الرسم عليه دون أن يختفي أي جزء 
من الشكل (أمر طبيعي لأن الصورة أصبحت مخزنة)ء بعد هذه المقدمة الطويلة سأريكم كود رسم دائرة. 
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File Edit View Refactor Project Build Debug Data Iools Test Window Help 
I-A E RHAA KN HE) 47-C - @E-Fا|‎ p Debug > Any CPU > | BÈ} GetCur >|! 
E ê a 4> Ne a چ € 2ا ا‎ 
Start Page | Node.Designer.es” Node.cs "Node.cs [Design] | Striaght.cs I BinaryFiles,cs | Bitlmage.cs [ Program.cs] Shape.cs| BasicCurve.cs | Forml.es [Desi 


ê Test Node ¥ 2 و‎ 


using System.Collections.Generic; 


l5 


1 
i 
1 
i 
lı 


using System. ComponentModel 7 
using System. Drawing? 

using System. Data; 

using System. Ling; 

sing System. Text; 

Lusing System.Windows . Forms; 


=] namespace Test1l 


٤ 


1 public partial class Node : UserControl 
{ 


| Seong EEG [E Bıodxa ERE | OAL 24 


Graphics g;7 
Bitmap bitmap; 


1 public Node () 
{ 


InitializeComponent () ; 
DrawCircle () ; 
٣ } 


1 public void DrawCircle () 
{ 
bitmap = new Bitmap (this.Width, this.Height) ; 
gq = Graphics. FromImage (bitmap) ; 
qg.DrawEllipse (new Pen ({Brushes.Black, 3), new Rectangle (5,5, this.Width-10, this.Height-10) }; 
this. BackgroundImage = bitmap?; 


قمنا هنا بتعريف متحول من نوع 8|3۴ وحددنا له أبعاد الصورة (وهي نفس حجم ال C٣٥1‏ serل)‏ ثم 
تم تعریف متحول من صنف 8865 وحددنا له این یجب عليه الرسم» ومن ثم قمنا برسم دائرة (وهي حالة 
خاصة) واسناد الصورة المحتواة في ال 814P‏ إلى الخلفية ©. 


5) أُما شكل ال ٥۵6‏ أصبح (وضوحاً ©): 


6) سنقوم بتطوير ما سبق (بوكيمون ©): سنقوم بجعل حجم الدائرة بحجم ال ١٥۵8‏ تماماً بدل القيم الابتدائية 
(كون التابع لن يستدعى سوى مرة واحدة) هذا أولاً ثانياً نريد أن نراها فيجولياً ©» لذلك نقوم بإضافة حدث 
تغير حجم ال N0128‏ ونكتب فيه: 


Private void Node SizeChanged (object sender, EventArgs e} 
1 
DrawCircle (} 7 
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الآن عند استخدام Node JI‏ یمکن رؤية الدائرة المرسومة وعند تغییر حجم ال N0٥‏ نلاحظ تغیر حجم الدائرة. 


7) نكمل عملية تصميم ال ٥٥‏ الآن نقوم بإضافة #ا10ا إلى ال ۵8٥۸ء‏ ونضيف سطراً إلى الكود السابق 


مفاده تغيير موقع ال ١1٥2ا‏ ليصبح بمنتصف الدائرة» ولكي نقوم بتغيير ال ×16 الخاص بال 216ا نقوم 
بإضافة ۴۲١8۲۷‏ معينة كالتالي: 


this.Background Image = bitmap? 
1abel11 .Location = new Point (this.Width/2-10, this .Height/2-10} ; 


public String LableText 

{ 
qet { return label1.Tezxt; } 
set { label1.Tezt = value; } 


عند كتابة الكود السابق نجد الخاصية السابقة ضمن خصائص ال "٥0٥‏ في قائمة ال كءااممه۴ التي تحوي 
جميع خصائص ذا .component J|‏ 


vn e j اسم ب‎ 
| (E Margin 3333 
ن‎ MaximurmSize 0,0 ع‎ 
ا‎ ُ E MinimumSize 0, 0 
a O Tier e ۱ Padding 0, 0, 0,0 
ا‎ E Size 140, 64 
E 
lable 
LableText 


8( لكم هنا كامل الحرية في إكمال المثال السابق ©. 


ملاحظة على الطريق: يمكن قص ال ۴۵٣6١‏ لتصميم الشكل الذي نريده كيف؟ 
1 
System . Drawing .Drawing2ZD.GraphicsPath 9p?‏ 
JP = new System. Drawing .Drawing2D.GraphiczcsPath{(}?;‏ 
qpP.AddEIlIlipse (O0, Û, panel1.Width, panel1.Height) ;‏ 
this.Regqion = new FEegion (GP) ;‏ 


ıı 


اعداد الطالب: محمد سياف 


User Controls with Visual C# 


© السكوت علامة الرضاء الكود واضح من عنوانه ©» صنف ال ۸أics۴2امaاG‏ هو صنف © نستخدمه لتخزين 


النقاط بشكل مختصر جدأًء ولكي نقوم بقص أي شكل يجب أن نرسم الشكل الذي نريد (قد يكون تتالي من 


المستقيمات أو النقاط التي تحدد بالنهاية منحني مغلق)» الصف السابق يمكننا من ذلك 
ser٥‏ على شكل دائرة عندها أخزن الدائرة (التي تمثل حدود الشكل) ضمن متحول من الصف السابق» 
ومن ثم نقوم بقص الشكل بحسب حدود الدائرة التي رسمتها من خلال التعليمة السابقة. 


کیف یمکن استخدام أو تضمین ٥٥۸٤١٥1‏ ۲مول؟ 


أظنكم كنتم تريدون معرفة كيف يتم ذلك ©» يتم ذلك باتباع الخطوات التالية: 


.Add Reference رlتخi,‎ References J| نضغط بالزر الأیمن وق‎ )1 


r" Solution 'MiyOCR' (3 projects] 
Êl: E ImageProcessing 


H.- EA] Properties 


© فمثلا أريد شكل ال 


2) ونفتح 5ه) ال أءمزه۴۲ في حال کان قمنا بإضافته مشروع ٤۲٥١‏ ١٥٥۲لا‏ إلى مشروعنا الأصلي» أو 


نختار 8۲٥۷58‏ لنختار المشروع )٠٠511(‏ الذي صممنا فيه ال ملهN:‏ 


اس ےا 


Browse 1 Recent 


| Project Directory 
EA Programming Cê Windows Applications AN M... 


EN\Programming\ C# Windows Applications ANM... 


Projects 


Add 


NET [com 


Project Name 5 


MyOCR 
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3 عندها سنجد مشروعنا السابق ك ااك ضمن ال كهء١ 86٠6١٠‏ الخطوة التالية (وهي خفية نوعاً ما) أن نقوم 
بتتفیذ المشروع أقصد ( ۴5 + »)٥٣٤۲٥۱‏ عندها سيظهر ضمن الأدوات ( )٠٠٥١۱80٥×‏ مجموعة أدوات 
جدیدة باسم "؟†Componen‏ 1ا" نستطیع أن نختار منها ال ٣87‏ مهه الذي صممناه واستخدامه 

Toolbox ¥ .© 


= Testl Components . 
lk Pointer 


= ImageProcessing Components a 
ْ lode 
k Pointer Version 1.0.0.0 . 
0F Bitlmage .NET Component 
= All Windows Forms 
lk Pointer 


في حال كان المشروع " "٣٠511‏ موجوداً ضمن المشروع الأصلي» والمشروع الأصلي يستخدم ال compone۸‏ 


بها في المشروع '"51ئ6!". 


ملاحظة على الهامش: يمكن تحويل ال ٣٠١‏ همتع السابق إلى اال (حتى ولو كان عبارة عن مجموعة 
۴۴08ل بعدة ملفات) واستخدامه ضمن أي مشروع» ولكني لا أذكر الآن التعليمة التي تقوم بذلكء وبكل 
الأحوال لا أنصحكم بذلك مالم تقوموا بتصميم ٥٥۳١٥0١8١‏ كامل مع معالجة مختلف جميع أنواع Exceptions Jl‏ 
التي من الممكن أن ترد وحتى التي لن ترد © (اسئلو المجرب)ء لأنه عند ورود أي ١٥آأم ٤×‏ عند استخدام ال 
ا۵ء لن يتم معرفة مشكلته وسنضطر عندها للرجوع إلى مشروعه الأصلي واكتشاف متى سيظهر هذا الخطاً معنا ثم 
نحاول معرفة أسبابه ومعالجته. 


يمكن إنشاء 5١08م‏ صهء لوظائف الأوتومات أو الخوارزميات أو المشاريع. 


ونهاية نشكر حسن استماعكم» ونرجو أن تعم الفائدة عليكم وعليناء والحمد لله... 
وأعتذر عن ورود أي خطأء ولا مشكلة في إعلامي بها إن وردت... 


لا رامن ائم الأغات:: 
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